let {$:$$} = Utils;

class Magnify{
    constructor(){
        this.init()
    }
    init(){
        this.ele_cube       = $$(".cube");
        this.small_img_wrap = $$(".small-img");
        this.big_img_wrap   = $$(".big-img");
        this.small_img      = $$(".small-img img")
        this.big_img        = $$(".big-img img") 
        this.small_img_wrap_position = getAbsPosition(this.small_img_wrap);
        this.ele_cube_size  = this.getSize(this.ele_cube);
        this.big_img_size   = this.getSize(this.big_img);
        this.big_img_wrap_size = this.getSize(this.big_img_wrap);
        this.small_img_wrap_size = this.getSize(this.small_img_wrap);
        this.small_img_wrap.addEventListener("mouseenter",this.showImg.bind(this));
        this.small_img_wrap.addEventListener("mouseleave",this.hideImg.bind(this));
        this.small_img_wrap.addEventListener("mousemove",this.handlerMove.bind(this));
    }
    handlerMove(evt){
        let e = evt || event;
        this.mouseX = e.pageX-this.small_img_wrap_position.left-this.ele_cube_size.width/2;
        this.mouseY = e.pageY-this.small_img_wrap_position.top-this.ele_cube_size.width/2;
        this.mouse_position = this.boundray(this.mouseX,this.mouseY);
        this.img_prop = this.proportion(this.mouseX,this.mouseY);
        this.imgMove();
    }

    proportion(pro1,pro2){
        this.propX = (pro1/(this.small_img_wrap_size.width - this.ele_cube_size.width))*(this.big_img_size.width-this.big_img_wrap_size.width);
        this.propY = pro2/(this.small_img_wrap_size.height - this.ele_cube_size.height)*(this.big_img_size.height-this.big_img_wrap_size.height);
        return {
            propX :this.propX,
            propY :this.propY
        }
    }

    boundray(x,y){
    x = (x < 0 ? 0:x);
      x = x  >  (this.small_img_wrap_size.width - this.ele_cube_size.width) ? (this.small_img_wrap_size.width - this.ele_cube_size.width) : x;
      y = y < 0 ? 0 : y;
      y = y > (this.small_img_wrap_size.height - this.ele_cube_size.height) ? (this.small_img_wrap_size.height - this.ele_cube_size.height) : y;
      return {
            x : x,
            y: y 
      }
    }
    showImg(){
        this.ele_cube.style.display = "block";
        this.big_img_wrap.style.display = "block";
        this.small_img.style.opacity = 0.3;
        
    }
    hideImg(){
        this.ele_cube.style.display = "none";
        this.big_img_wrap.style.display = "none";
        this.small_img.style.opacity = 1;
    }
    getSize(dom){
        return {
              width : parseInt( getComputedStyle(dom)["width"] ),
              height : parseInt( getComputedStyle(dom)["height"] ) 
        }
    }
    imgMove(){
    
       
        this.ele_cube.style.left = this.mouse_position.x + "px";
        this.ele_cube.style.top  = this.mouse_position.y + "px";
        this.big_img.style.left  = -this.img_prop.propX   + "px";
        this.big_img.style.top   = -this.img_prop.propY   + "px";
        this.ele_cube.style.backgroundPosition = -this.mouse_position.x + "px " + -this.mouse_position.y + "px";

    }
}

function getAbsPosition(dom){
    var position = {
          left : dom.offsetLeft,
          top  : dom.offsetTop
    }
    if(dom.offsetParent === document.body){
          return position;
    }else{
          var pos = getAbsPosition(dom.offsetParent)
          return {
                left : dom.offsetLeft + pos.left,
                top  : dom.offsetTop  + pos.top
          }
    }
}

// new Magnify();